<template>
    <div class="collect">
      <div class="head flex between item-center">
        
      </div>
      <div class="content">
        <ul style="margin-bottom: 10px;">
          <li class="flex shadow-bottom between" v-for="item of collections" :key="item.id">
            <div class="flex item-center" style="flex: 2;">
                <div class="img-center" :style="{backgroundImage: `url(${item.show_tpdz})`}"></div>
                <div class="titlebox">
                    <h2 class="black large">{{ item.course_name }}</h2>
                    <p>{{ item.introduction }}</p>
                </div>
            </div>
            <div class="titlebox" style="flex: 1;">
                <p>学习人数</p>
                <p>{{ item.study_num }}</p>
            </div>
            <div class="titlebox" style="flex: 1;">
                <p>知识点</p>
                <p>{{ item.knowledge }}</p>
            </div>
            <div class="titlebox" style="flex: 1;">
                <p>难易程度</p>
                <p>{{ item.difficult_degree == '0' ? '简单' : '困难' }}</p>
            </div>
            <div class="titlebox" style="width: 150px;">
                <el-button type="primary" plain @click="handleStudy(item)">继续学习</el-button>
            </div>
          </li>
        </ul>
        <el-pagination background layout="prev, pager, next" :total="total"
          @current-change="changePage"
          :page-count="total % params.pageSize == 0 ? total / params.pageSize : total / params.pageSize + 1"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import Api from '@/api'
  export default {
    data() {
      return {
        params: {
          pageNum: 1,
          pageSize: 5
        },
        total: 0,
        studyStatus: [
          { id: 1, title: '所有', current: true },
          { id: 2, title: '进行中', current: false },
          { id: 3, title: '已完成', current: false }
        ],
        collections: [
          
        ]
      }
    },
    mounted() {
      this.getCollections()
    },
    methods: {
        getCollections() {
        Api.findStudyCollectListPage(this.params).then(res => {
          this.collections = res.data.rows
          this.total = res.data.total
        })
      },
      handleStudy(course) {
        this.$router.push(`/course/${course.course_id}`)
      },
      changeStatus(status) {
        this.studyStatus.forEach(item => item.current = item.id === status.id)
      },
      changePage(val) {
        this.params.pageNum = val
        this.getRecords()
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .current {
    color: var(--color-primary);
    border-color: var(--color-primary) !important;
  }
  .collect {
    padding: 10px;
    .head {
      .status {
        li {
          width: 64px;
          text-align: center;
          padding: 5px 10px;
          cursor: pointer;
          border: 1px solid #ccc;
        }
      }
    }
    .content {
      >ul {
        >li {
          margin-top: 20px;
          transition: all .3s;
          height: 180px;
          padding: 15px 20px;
          &:hover {
            box-shadow: 0 5px 20px #ddd;
          }
          &>div:first-of-type {
            height: 100%;
            .img-center {
                margin-right: 10px;
                width: 250px;
                height: 100%;
            }
          }
          .titlebox {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-around;
          } 
        }
        
      }
    }
  }
  </style>